<script lang="ts" setup>
import { getCancelOrderAPI, getPayStatusAPI, getWechatCodeAPI } from '@/api/order';
import { OrderDetail } from '@/api/type/user';
import { getOrderDetailAPI } from '@/api/user';
//@ts-ignore
import QRCode from 'qrcode'
import { ref } from 'vue';
import { useRoute } from 'vue-router';

const route=useRoute()
const orderDetail=ref<OrderDetail>()
const getOrderDetail=async()=>{
  const res=await getOrderDetailAPI(route.query.orderId as string)
  orderDetail.value=res.data
}
getOrderDetail()
//取消订单

const CancleOrder=async()=>{
  await getCancelOrderAPI(route.query.orderId as string)
  getOrderDetail()
}
//微信支付
let timer=ref()
const dialogVisible=ref<boolean>(false)
const imgUrl=ref<string>('')
const goPay=async()=>{
  const res=await getWechatCodeAPI(route.query.orderId as string)
  //更具服务器返回二维码信息生成二维码图片
  imgUrl.value=await QRCode.toDataURL(res.data.codeUrl)
  dialogVisible.value=true
  timer.value=setInterval(async()=>{
    const res=await getPayStatusAPI(route.query.orderId as string)
    if(res.data) {
       clearInterval(timer.value)
       dialogVisible.value=false
       getOrderDetail()
    }
  },1000)
}
const close=()=>clearInterval(timer.value)

</script>

<template>
  <div class="certification">
    <div class="title"> 挂号详情</div>
    <div class="icons">
      <div class="left">
        <svg t="1728491226535" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="36645" width="28" height="28"><path d="M438.564 681.495a32 32 0 0 1-24.621-11.558L289.851 520.479c-11.29-13.597-9.418-33.771 4.178-45.062 13.597-11.29 33.772-9.418 45.062 4.178l101.405 122.133L685.232 351.26c12.353-12.641 32.611-12.874 45.252-0.523 12.641 12.351 12.875 32.611 0.523 45.252L461.45 671.859a32 32 0 0 1-22.886 9.636z" p-id="36646" fill="#4490F1"></path><path d="M511.295 957.3c-60.354 0-118.903-11.862-174.021-35.258-16.268-6.904-23.858-25.69-16.954-41.959 6.906-16.269 25.692-23.858 41.959-16.953 47.166 20.02 97.301 30.17 149.015 30.17 210.492 0 381.74-171.247 381.74-381.739s-171.248-381.74-381.74-381.74-381.739 171.248-381.739 381.74c0 36.946 5.261 73.459 15.637 108.521 5.015 16.946-4.657 34.75-21.604 39.765-16.946 5.015-34.75-4.656-39.765-21.604-12.122-40.962-18.268-83.584-18.268-126.683 0-60.16 11.79-118.538 35.042-173.512 22.452-53.083 54.587-100.748 95.512-141.674 40.926-40.926 88.592-73.061 141.674-95.513 54.974-23.252 113.351-35.042 173.512-35.042s118.539 11.79 173.512 35.042c53.082 22.452 100.748 54.587 141.674 95.513s73.061 88.591 95.512 141.674c23.252 54.974 35.042 113.352 35.042 173.512s-11.79 118.538-35.042 173.512c-22.451 53.082-54.587 100.748-95.512 141.674-40.926 40.926-88.592 73.061-141.674 95.513C629.834 945.51 571.456 957.3 511.295 957.3z" p-id="36647" fill="#4490F1"></path></svg>
        <span>{{orderDetail?.param.orderStatusString}}</span>
      </div>
      <div class="right">
        <img src="../../../../assets/images/code_login_wechat.png" alt="">
        <div class="content_wrapper">
          <div class="wechat">
            <span>微信</span>
            <svg t="1728491498077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="37804" width="24" height="24"><path d="M669.3 369.4c9.8 0 19.6 0 29.4 1.6C671 245.2 536.9 152 383.2 152 211.6 152 71 269.7 71 416.8c0 85 45.8 156.9 124.2 210.9l-31.1 93.2L273.6 667c39.2 8.2 70.3 16.3 109.5 16.3 9.8 0 19.6 0 31.1-1.6-6.5-21.3-9.8-42.5-9.8-65.4 0.1-135.7 116.2-246.9 264.9-246.9z m-168.4-85c24.5 0 39.2 16.3 39.2 39.2 0 22.9-16.3 39.2-39.2 39.2-24.5 0-47.4-16.4-47.4-39.2 0-24.5 24.6-39.2 47.4-39.2z m-216.3 73.1c-24.7 0-47.8-16.2-47.8-38.8 0-24.3 24.7-38.8 47.8-38.8s39.5 16.2 39.5 38.8c0.1 22.7-16.4 38.8-39.5 38.8z" fill="#00C25F" p-id="37805"></path><path d="M953.8 613c0-125.9-124.2-227.2-264.8-227.2-148.8 0-266.5 103-266.5 227.2 0 125.9 117.7 227.2 266.5 227.2 31.1 0 62.1-8.2 93.2-16.3l85 47.4-22.9-78.5c62.1-47.4 109.5-109.5 109.5-179.8z m-351.5-39.2c-14.7 0-31.1-14.7-31.1-31.1 0-14.7 16.3-31.1 31.1-31.1 22.9 0 39.2 16.3 39.2 31.1 0 16.4-14.7 31.1-39.2 31.1z m178-7.6c-14.8 0-31.3-14.6-31.3-30.7 0-14.6 16.5-30.7 31.3-30.7 23.1 0 39.5 16.2 39.5 30.7 0 16.2-16.4 30.7-39.5 30.7z" fill="#00C25F" p-id="37806"></path></svg>
            <span>关注“北京114预约挂号</span>
          </div>
          <div>快速挂号，轻松就医</div>
        </div>
      </div>
    </div>
    <div class="sub_title">
      <div class="block"></div>
      挂号信息
    </div>
    <div class="context">
      <el-form  >
        <el-form-item label="就诊人信息:">{{ orderDetail?.patientName }}</el-form-item>
        <el-form-item label="就诊日期:">{{orderDetail?.reserveDate}}</el-form-item>
        <el-form-item label="就诊医院:">{{orderDetail?.hosname}}</el-form-item>
        <el-form-item label="就诊科室:">{{orderDetail?.depname}}</el-form-item>
        <el-form-item label="医生职称:" >{{orderDetail?.title}}</el-form-item>
        <el-form-item label="医事服务费:" style="color: #4490F1;font-weight: 700;">{{orderDetail?.amount}}元</el-form-item>
        <el-form-item label="挂号单号:">{{orderDetail?.outTradeNo}}</el-form-item>
        <el-form-item label="挂号时间:">{{orderDetail?.createTime}}</el-form-item>
      </el-form>
    </div>
    <div class="rule">
      <div class="rule_title"> 注意事项</div>
      <div>
        1、请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；<br> 
        <span style="color:red">2、【取号】就诊当天需在{{orderDetail?.fetchTime}}在医院取号，未取号视为爽约，该号不退不换；</span><br>
        3、【退号】在{{orderDetail?.quitTime}}可在线退号 ，逾期将不可办理退号退费；<br>
        4、北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；<br>
        5、请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
        </div>
    </div>
    <el-row v-if="orderDetail?.orderStatus===0" type="flex" justify="end" align="bottom" style="margin-top: 60px;height: 123px;">
      <el-col :span="6">
        <el-popconfirm title="确定取消预约吗?" @confirm="CancleOrder">
           <template #reference>
            <el-button style="width: 140px;height: 44px;color: #4490F1;">取消预约</el-button>
          </template>
        </el-popconfirm>
      </el-col>
      <el-col :span="14">
        <el-button style="width: 140px;height: 44px;" type="primary" @click="goPay">支付</el-button>
      </el-col>
    </el-row>
    <el-dialog @close="close" v-model="dialogVisible" width="500">
      <el-card style="width: 440px; height: 350px;margin-left: 10px;">
        <div class="wechat_pay">
          <img :src="imgUrl" alt="">
          <div class="pay_info">
            <span>请使用微信扫一扫</span>
            <span>扫描二维码支付</span>
          </div>
        </div>
      </el-card>
  </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.certification {
  .title {
    color: #666;
    font-weight: 700;
    margin-bottom:20px ;
  }
  .icons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background-color: #f4f9ff;
    .left {
      display: flex;
      align-items: center;
      svg {
        margin: 0 14px 0 20px;
      }
      span {
        color: #4990F1;
        font-weight: 700;

      }
    }
    .right {
      display: flex;
      align-items: center;
      padding-left: 40px;
      img {
        width: 61px;
        height: 61px;
      }
      .content_wrapper {
        color: #999;
        margin: -3px 10px 0 12px;
        font-size: 14px;
        padding-bottom: 30px;
        .wechat {
          margin-bottom: 3px;
        }
      }
    }
  }
  .sub_title {
    display: flex;
    font-size: 14px;
    color: #999;
    margin:40px 0 20px 0;
    .block {
      width: 4px;
      height: 14px;
      background-color: #4990F1;
      border-radius: 2px;
      margin-right: 6px;
    }
  }
  .context {
    margin: 40px 0 0 140px;
  }
  .rule {
    background-color:#fafafa ;
    padding: 30px;
    margin-top: 40px;
    font-size: 14px;
    color: #666;
    .rule_title {
      color: #333;
      font-weight: 700;
      margin-bottom: 10px;
    
    }
  }
  .wechat_pay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    img {
      width: 220px;
      height: 220px;
    }
    .pay_info {
      display: flex;
      flex-direction: column;
      color: #606266;
      font-size: 14px;
      margin-bottom: 40px;
    }
  }
}
</style>